<template>
	<view class="container">
		<!-- 缴费记录列表 -->
		<view class="item" @tap="onRecordClick" :data-index="index" v-for="(item, index) in record_list" :key="index">
			<!-- 缴费类型图标 -->
			<image v-if="item.type == 0" class="item_img" src="/static/assets/charge_reco_room.png" mode="aspectFill" :data-index="index"></image>
			<image v-if="item.type == 1" class="item_img" src="/static/assets/charge_reco_water.png" mode="aspectFill" :data-index="index"></image>
			<image v-if="item.type == 2" class="item_img" src="/static/assets/charge_reco_elec.png" mode="aspectFill" :data-index="index"></image>

			<!-- 房间名 金额 时间 缴费类型 -->
			<view style="display: flex; flex-direction: column; flex-grow: 1; margin-left: 20rpx">
				<!-- 房间名 金额 -->
				<view style="display: flex; flex-direction: row; justify-content: space-between; align-items: center">
					<view style="font-size: 30rpx; color: #000">{{ item.name }}</view>
					<view style="font-size: 30rpx; color: #ff9900">￥{{ item.amount_paid }}</view>
				</view>

				<!-- 时间 类型 -->
				<view style="display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-top: 20rpx">
					<view style="font-size: 24rpx; color: #999">{{ item.pay_time }}</view>
					<view style="font-size: 24rpx; color: #999"></view>
				</view>
			</view>
		</view>

		<view v-if="!record_list || record_list.length <= 0" style="margin: 300rpx auto; color: #cccccc">暂无数据~</view>
	</view>
</template>

<script>
	const app = getApp(); // 获取应用实例
	const util = require('../../../utils/util.js');
	import { getRecordList } from '../../../utils/http/api';
	export default {
		data() {
			return {
				/**缴费记录列表数据  数据格式
				 * [{id:'',name:'',amount_total:'',group:{id:'',type:'',name:''}},{}]
				 */
				record_list: []
			};
		},
		onLoad(options) {
			this.reqRecordList()
		},
		// 页面相关事件处理函数--监听用户下拉动作
		onPullDownRefresh() {
			this.reqRecordList()
		},
		methods: {
			// 查看缴费详情
			onRecordClick(e) {
				let index = e.currentTarget.dataset.index
				let id = this.record_list[index].id;
				let url = '/pages/charge/c_reco_detail/c_reco_detail?id=' + id
				let type = this.record_list[index].type; // 0 房租 1 水 2 电 3 停车
				if (type == '0') {
					url = '/pages/charge/c_reco_detail_2/c_reco_detail_2?id=' + id
				} else if (type == '1') {
					url = '/pages/charge/c_reco_detail/c_reco_detail?id=' + id + '&type=1'
				} else if (type == '2') {
					url = '/pages/charge/c_reco_detail/c_reco_detail?id=' + id + '&type=2'
				}
				util.navigateTo(url)
			},

			// 请求我的缴费列表
			async reqRecordList() {
				uni.showLoading({ title: '处理中', mask: true })
				let { code, msg, data } = await getRecordList({ page: '1', limit: '999999', token: app.globalData.gl.token })
				uni.stopPullDownRefresh()
				if (code == '1') {
					this.setData({ record_list: data.data })
				} else {
					uni.showToast({ title: msg, icon: 'error' })
				}
			}
		}
	};
</script>
<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
	}

	.item {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: auto;
		height: 120rpx;
		margin-top: 20rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		border-bottom-width: 4rpx;
		border-bottom-color: #f8f8f8;
		border-bottom-style: solid;
		border-radius: 1rpx;
	}

	.item_img {
		width: 72rpx;
		height: 72rpx;
	}
</style>